<style>
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* 针对Firefox */
    input[type="number"] {
        -moz-appearance: textfield;
    }

    .step-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 0 30px 0;
        position: relative;
    }

    .yuan-box {
        width: 50%;
        padding: 0 8px;
    }

    .yuan {
        height: 48px;
        line-height: 48px;
        font-size: 14px;
        background:#f7f8fa;
        color: #323233;
        text-align: center;
        padding:0 10px;
        position: relative;
    }
    .yuan::after{
        content: " ";
        display: block;
        width: 0;
        height: 0;
        border-top:24px solid rgba(0,0,0,0);
        border-bottom:24px solid rgba(0,0,0,0);
        border-left:12px solid #f7f8fa;
        position: absolute;
        top: 50%;
        margin-top: -24px;
        right: -12px;
    }
    .yuan::before{
        content: " ";
        display: block;
        width: 0;
        height: 0;
        border-top:24px solid #f7f8fa;
        border-bottom:24px solid #f7f8fa;
        border-left:12px solid rgba(0,0,0,0);
        position: absolute;
        top: 50%;
        margin-top: -24px;
        left: -12px;
    }

    .yuan-box:first-child .yuan:before{
        display: none;
    }
    .yuan-box:last-child .yuan:after{
        display: none;
    }

    .yuan-active .yuan {
        background: #ee0000;
        color: #fff;
    }
    .yuan-active:hover .yuan
    {
        background: #f24040ff;
    }
    .yuan-active .yuan::after{
        border-left-color: #ee0000;
    }
    .yuan-active:hover .yuan::after{
        border-left-color: #f24040ff;
    }
    .yuan-active .yuan::before{
        border-top-color:#ee0000;
        border-bottom-color:#ee0000;
    }
    .yuan-active:hover .yuan::before{
        border-top-color:#f24040ff;
        border-bottom-color:#f24040ff;
    }


    .form-horizontal{
        padding: 0 8px;
    }

    

    .basic-info-title {
        height: 48px;
        line-height: 48px;
        background:#f7f8fa;
        font-size: 16px;
        font-weight: normal;
        position: relative;
        padding-left: 16px;
    }
    .basic-info-title::before{
        content: "";
        position: absolute;
        width: 4px;
        height: 16px;
        left: 6px;
        top: 16px;
        background: #ee0000;
    }

    .form-horizontal .form-group
    {
        margin: 24px 0;
    }
    /*.basic-info-title div {
        width: 4px;
        height: 23px;
        background-color: #ff0000;
        margin-right: 10px;
    }

    .basic-info-title span {
        font-size: 12px;
        margin-left: 15px;
    }*/



    .foot-btn button {
        position: fixed;
        bottom: 20px;
        left: 50%;
        right: 0;
        width: 170px;
        height: 35px;
        border: none;
        font-size: 16px;
        color: #fff;
        margin-left: -85px;
        background-color: #ff0000;
        /* position: relative; */
        z-index: 1000;
    }

    .scheme-box {
        display: none;
        
    }

    .scheme-box .condition{
        border: 1px solid #ebedf0;
        display: flex;
        align-items: center;
    }
    .scheme-box .condition .title{
        width: 110px;
        padding:14px 16px;
        white-space:nowrap;
        background-color: #f7f8fa;
        font-weight: 500;
    }
    .scheme-box .condition .checkbox{
        padding-left: 16px;
        padding-top: 0;
    }

    .scheme-box .body table
    {
        margin: 20px 0;
        width: 100%;
        border-collapse: collapse;
    }
    .scheme-box .body table thead
    {
        overflow:hidden;
        background:#f7f8fa;
    }
    .scheme-box .body table thead tr
    {
        line-height: 56px;
        border-bottom:1px solid #ebedf0;
    }
    .scheme-box .body table thead tr th
    {
        text-indent: 16px;
        border-left:1px solid #ebedf0;
    }
    .scheme-box .body table tbody tr
    {
        border-bottom: 1px solid #ebedf0;
    }
    .scheme-box .body table tbody tr td
    {
        border-left: 1px solid #ebedf0;
        position: relative;
        vertical-align: middle;
    }
    .scheme-box .body table tbody tr td .flex-table-div
    {
        display: flex;
        align-items: center;
        min-height: 56px;
        padding:16px 0 16px 16px;
    }
    .scheme-box .body table tbody tr td .flex-table-div .add-icon
    {
        width: 16px;
        height: 16px;
    }
    .scheme-box .body table tbody tr td .del-icon
    {
        position: absolute;
        top: 0;
        left: 0;
        width: 16px;
        height: 16px;
    }
    .scheme-box .body table tbody tr td .flex-table-div .empty-status
    {
        margin-left: 8px;
        color: #c8c9cc;
    }

    .scheme-box .body table tbody tr td .flex-table-div .item-names
    {
        margin-left: 8px;
        max-width: 60%;
        display: grid;
        grid-template-columns: 100%;
        word-wrap: break-all;
    }

    /*.flex-row {
        display: flex;
    }

    .scheme-item {
        width: 49%;
        display: inline-block
    }

    .way-box {
        display: flex;
        align-items: center;
        font-weight: bold;
        margin-bottom: 20px;
    }

    .radius {
        display: flex;
        align-items: center;
        border: 1px solid #ccc;
        margin: 0 10px;
    }

    .scale {
        margin: 0 10px;
    }

    .radius input {
        border: none;
    }

    .radius span {
        margin: 0 10px;
    }

    .interzone-box {
        margin-bottom: 20px;
    }

    .interzone-btn {
        margin-top: 30px;
        width: 100px;
        height: 28px;
        background-color: #ff0000;
        color: #fff;
        line-height: 28px;
        margin-left: 40px;
        border-radius: 4px;
        text-align: center;
    }

    .scale-ipt {
        display: flex;
        align-items: center;
        padding-right: 5px;
        border: 1px solid #ccc;
    }

    .scale-ipt input {
        border: none;
    }*/
</style>
<div class="main-box">
    <div class="step-box">
        <div class="yuan-box yuan-active">
            <div class="yuan">1. 基本信息</div>
        </div>
        <div class="yuan-box">
            <div class="yuan">2. 方案配置</div>
        </div>
    </div>
    <form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
        <div class="basic-box">
            <div class="basic-info-title">
                基本信息
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
                <div class="col-xs-12 col-sm-4">
                    <input id="c-name" placeholder="请输入方案名称" class="form-control" name="row[name]" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Type')}:</label>
                <div class="col-xs-12 col-sm-4">

                    <select id="c-type" class="form-control selectpicker" name="row[type]">
                        {foreach name="typeList" item="vo"}
                        <option value="{$key}" {in name="key" value="0" }selected{/in}>{$vo}</option>
                        {/foreach}
                    </select>

                </div>
            </div>
            <div class="form-group foot-btn">
                <button type="button" class="next-btn">下一步</button>
            </div>
        </div>
        <div class="scheme-box">
            <!--提成条件-->
            <div class="condition">
                <div class="title">
                    提成条件：
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" checked disabled value="1">项目</label>
                    <label><input type="checkbox" checked value="2">员工职称</label>
                    <label><input type="checkbox" checked value="3">支付方式</label>
                </div>
            </div>
            <div class="body">
                <table>
                    <thead>
                        <tr>
                            <th style="width:80px;">项目</th>
                            <th style="width:80px;" class="zhicheng">员工职称</th>
                            <th style="width:80px;" class="pay_type">支付方式</th>
                            <th style="width:176px;">阶梯式计算</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr data-key="0">
                            <td data-type="xiangmu" class="xiangmu" style="width:80px;">
                                <img style="display:none;" class="del-icon" src="/assets/img/del.png">
                                <div class="flex-table-div">
                                    <img class="add-icon" src="/assets/img/add.png" />
                                    <div class="empty-status">全部</div>
                                    <div class="item-names" style="display:none;">
                                        <!--<div class="item"></div>-->
                                    </div>
                                </div>
                            </td>
                            <td data-type="zhicheng" class="zhicheng" style="width:80px;">
                                <img style="display:none;" class="del-icon" src="/assets/img/del.png">
                                <div class="flex-table-div">
                                    <img class="add-icon" src="/assets/img/add.png" />
                                    <div class="empty-status">全部</div>
                                    <div class="item-names" style="display:none;">
                                        
                                    </div>
                                </div>
                            </td>
                            <td data-type="pay_type" class="pay_type" style="width:80px;">
                                <img style="display:none;" class="del-icon" src="/assets/img/del.png">
                                <div class="flex-table-div">
                                    <img class="add-icon" src="/assets/img/add.png" />
                                    <div class="empty-status">全部</div>
                                    <div class="item-names" style="display:none;">
                                        
                                    </div>
                                </div>
                            </td>
                            <td style="width:176px;">
                                <div class="flex-table-div">
                                    <div>
                                        <select class="form-control selectpicker">
                                            <option value="1">固定</option>
                                            <option value="2">比例</option>
                                        </select>
                                    </div>
                                    <input style="width:70px" class="form-control" type="number" name="" min="0" step="1" />
                                    <span class="unit">元</span>
                                    <label style="margin-bottom: 0px; margin-left: 10px;"><input type="checkbox" checked value="1"> 多人分配提成</label>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- 销售 -->
            <!--<div class="flex-row sale-box0" style="display: none;">
                <div class="scheme-item">
                    <div class="basic-info-title title1">
                        <div></div>
                        普通商品 <span>默认针对所有商品生效</span>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('员工职称')}:</label>
                        <div class="col-xs-12 col-sm-4">
                            <input id="c-staff_ids" data-rule="required" data-source="wanlshop/staff/rank"
                                data-multiple="true" class="form-control selectpage" name="row[staff_ids]" type="text"
                                value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2"></label>
                        <div class="col-xs-12 col-sm-4">
                            <div class="radio">
                                {foreach name="gtypeList" item="vo"}
                                <label for="row[gtype]-{$key}"><input id="row[gtype]-{$key}" class="radio-ipt"
                                        name="row[gtype]" type="radio" value="{$key}" {in name="key" value="0"
                                        }checked{/in} />
                                    {$vo}</label>
                                {/foreach}
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2"></label>
                        <div class="col-xs-12 col-sm-4">
                            <div class="scale-ipt">
                                <input id="c-i3typesum" class="form-control" name="row[i3typesum]" type="text">
                                <span>%</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('Sku_ids')}:</label>
                        <div class="col-xs-12 col-sm-4">
                            <input id="c-sku_ids" data-rule="required" data-source="wanlshop/goods/index"
                                data-field="title" data-multiple="true" class="form-control selectpage"
                                name="row[sku_ids]" type="text" value="">
                        </div>
                    </div>
                </div>
                <div class="scheme-item">
                    <div class="basic-info-title title2">
                        <div></div>
                        卡项商品 <span>默认针对所有商品生效</span>
                    </div>
                    <div class="basic-info-title title3">
                        次卡
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2"></label>
                        <div class="col-xs-12 col-sm-4">
                            <div class="radio">
                                {foreach name="i1typeList" item="vo"}
                                <label for="row[i1type]-{$key}"><input id="row[i1type]-{$key}" class="radio-ipt"
                                        name="row[i1type]" type="radio" value="{$key}" {in name="key" value="0"
                                        }checked{/in} />
                                    {$vo}</label>
                                {/foreach}
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2"></label>
                        <div class="col-xs-12 col-sm-4">
                            <div class="scale-ipt">
                                <input id="c-i1typesum" data-rule="required" class="form-control" name="row[i1typesum]"
                                    type="text">
                                <span>%</span>
                            </div>

                        </div>
                    </div>
                    <div class="basic-info-title title4">
                        充值卡
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2"></label>
                        <div class="col-xs-12 col-sm-4">
                            <div class="radio">
                                {foreach name="i3typeList" item="vo"}
                                <label for="row[i3type]-{$key}"><input id="row[i3type]-{$key}" class="radio-ipt"
                                        name="row[i3type]" type="radio" value="{$key}" {in name="key" value="0"
                                        }checked{/in} />
                                    {$vo}</label>
                                {/foreach}
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2"></label>
                        <div class="col-xs-12 col-sm-4">
                            <div class="scale-ipt">
                                <input id="c-gtypesum" data-rule="required" class="form-control" name="row[gtypesum]"
                                    type="text">
                                <span>%</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('Sku1_ids')}:</label>
                        <div class="col-xs-12 col-sm-4">
                            <input id="c-sku1_ids" data-rule="required" data-source="wanlshop/goods/index"
                                data-field="title" data-multiple="true" class="form-control selectpage"
                                name="row[sku1_ids]" type="text" value="">
                        </div>
                    </div>
                </div>
            </div>-->
            <!-- 综合 -->
            <!--<div class="flex-row sale-box2" style="display: none;">
                <div class="scheme-item">
                    <div class="basic-info-title">
                        <div></div>
                        计算方式
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('Shop_id')}:</label>
                        <div class="col-xs-12 col-sm-4">
                            <input id="c-shop_id" data-rule="required" data-source="wanlshop/shop/index"
                                data-field="shopname" class="form-control selectpage" name="row[shop_id]" type="text"
                                value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('Staff_ids')}:</label>
                        <div class="col-xs-12 col-sm-4">
                            <input id="c-staff_ids" data-rule="required" data-source="staff/staff/index"
                                data-multiple="true" class="form-control selectpage" name="row[staff_ids]" type="text"
                                value="">
                        </div>
                    </div>
                    <view class="interzone-box">
                        <div class="way-box">
                            <div>累计业绩达标: </div>
                            <div class="radius">
                                <input class="form-control way-min-money" data-rule="required" style="width: 80px;"
                                    name="row[ladder][0][startamount]" type="number">
                                <span>至</span>
                                <input class="form-control way-max-money" data-rule="required" style="width: 80px;"
                                    name="row[ladder][0][endamount]" type="number">
                            </div>
                            <div>提成</div>
                            <div class="scale">
                                <select style="width: 100px;" class="form-control selectpicker select-change"
                                    name="row[ladder][0][type]">
                                    <option value="0">按百分比</option>
                                    <option value="1">按固定金额</option>
                                </select>
                            </div>
                            <div>

                                <div class="scale-ipt">
                                    <input class="form-control" data-rule="required" style="width: 100px;"
                                        name="row[ladder][0][typesum]" type="number">
                                    <span>%</span>
                                </div>
                            </div>
                        </div>
                    </view>
                    <div class="interzone-btn">增加区间</div>
                </div>
                <div class="scheme-item">
                    <div class="form-group" style="margin-top: 60px;">
                        <label class="control-label col-xs-12 col-sm-2">不计算综合提成</label>
                        <div class="col-xs-12 col-sm-4">
                            <input id="c-sku1_ids" data-rule="required" data-source="wanlshop/goods/index"
                                data-field="title" data-multiple="true" class="form-control selectpage"
                                name="row[sku_ids]" type="text" value="">
                        </div>
                    </div>
                </div>
            </div>-->
            <div class="form-group foot-btn">
                <!--<button type="submit">保存信息</button>-->
                <textarea style="display:none;" name="row[conditions]"></textarea>

                <button type="button" class="save-btn">保存信息</button>
            </div>
        </div>
    </form>
</div>